<template>
  <div class="Info">
    <div class="Info-left">
      <div class="Info-left-top">
        <el-row>
          <el-col :span="18" :offset="3">
            <el-card class="img-card" shadow="hover">
              <el-image :src="img" class="image"></el-image>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="Info-left-bottom">
        <el-row>
          <el-col :span="23" :offset="1"> </el-col>
        </el-row>
      </div>
    </div>
    <div class="Info-right">
      <div class="Info-right-top">
        <div class="Info-right-header">
          <div class="changeInfo">
            <el-tooltip placement="top" v-if="isDot">
              <template #content> 已被拒绝，点击查看处理意见 </template>
              <el-badge is-dot class="item" type="danger">
                <i @click="failVisible = true" class="el-icon-house"
                  >申请住户
                </i>
              </el-badge>
            </el-tooltip>
            <i
              @click="applyDialogTableVisible = true"
              v-else
              class="el-icon-house"
              >申请住户
            </i>
            ||
            <i @click="reAuthor" class="el-icon-edit-outline">修改个人信息 </i>
          </div>
        </div>
        <el-divider></el-divider>
        <el-form
          label-position="right"
          label-width="80px"
          class="info-form"
          v-loading.fullscreen.lock="loading"
        >
          <el-row style="width: 100%">
            <el-col :span="7">
              <el-form-item label="姓名:">
                {{ userInfo.name }}
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="性别:">
                {{ userInfo.sex }}
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="手机号码:">
                {{ userInfo.mobile }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width: 100%">
            <el-col :span="7">
              <el-form-item label="年龄:">
                {{ userInfo.age }}
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="住址:">
                {{ userInfo.address }}
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item label="身份证号:">
                {{ userInfo.idNumber }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width: 100%">
            <el-form-item label="说明:">
              {{ userInfo.description }}
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
  <el-dialog
    title="处理意见  (点击确定重新申请)"
    v-model="failVisible"
    width="30%"
    :before-close="handleClose"
  >
    <span>{{suggestion}}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="failVisible = false">取 消</el-button>
        <el-button type="primary" @click="applyDialogTableVisible = true"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>

  <el-dialog title="申请住户" v-model="applyDialogTableVisible" width="40%">
    <el-form :model="applyForm" size="small" :rules="rules" ref="applyForm">
      <el-form-item
        label="具体住址"
        :label-width="formLabelWidth"
        prop="address"
      >
        <el-input
          v-model="applyForm.address"
          autocomplete="off"
          required
        ></el-input>
      </el-form-item>
      <el-form-item
        label="人脸上传"
        :label-width="formLabelWidth"
        height="1000px"
      >
        (以最新照片为最后结果)
      </el-form-item>
      <el-upload
        class="upload-demo"
        drag
        :action="uploadUrl"
        :headers="header"
        multiple
        align="center"
        :on-success="Imgsubmit"
        :on-error="ImgsubmitError"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">
            只能上传 jpg/png 文件，且不超过 500kb
          </div>
        </template>
      </el-upload>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('applyForm')"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { getInfo } from "@/network/user.js";
import { applyHost } from "@/network/host.js";

export default {
  name: "UserInfo",
  data() {
    return {
      failVisible: false,
      suggestion:"",
      isDot: false,
      header: {},
      userInfo: {},
      star: 3,
      img: "/img/user.jpg",
      loading: false,
      applyDialogTableVisible: false,
      applyForm: { address: "" },
      uploadUrl: "/api/host/upload",
      imgIsSubmit: false,
      rules: {
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
      },
    };
  },
  methods: {
    //个人信息发生变化修改认证
    reAuthor() {
      this.$router.push("/auth");
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.failVisible = false
          console.log(this.applyForm);
          this.applySubmit();
        }
      });
    },
    applySubmit() {
      if (this.imgIsSubmit == true) {
        applyHost(this.applyForm).then(
          (res) => {
            if (res.code == 200) {
              this.$message.success("已提交申请");
              this.isDot = false
            } else {
              this.$message.error(res.data);
            }
            this.applyDialogTableVisible = false;
          },
          (err) => {
            this.$message.error("申请失败");
          }
        );
      } else {
        this.$message.error("请上传照片");
      }
    },
    Imgsubmit() {
      this.$message.success("照片上传成功");
      this.imgIsSubmit = true;
    },
    ImgsubmitError() {
      this.$message.error("照片上传失败");
    },
  },
  created() {
    this.loading = true;
    this.header.authorization = window.localStorage.getItem("authorization");
    getInfo()
      .then((res) => {
        Object.assign(res.data, res.data2);
        this.userInfo = res.data;
      })
      .catch((err) => {
        this.$message.error("网络错误");
      });
    applyHost(this.applyForm).then(
      (res) => {
        if (res.code == 300) {
          this.isDot = true;
          this.applyForm.state=2
          this.suggestion = res.data.suggest
        }
      },
      (err) => {}
    );
    this.loading = false;
  }
  };
</script>

<style>
.Info {
  margin-top: 10px;
  display: flex;
  min-width: 400px;
  min-height: 400px;
}

.Info-left {
  min-width: 200px;
  background-color: #fff;
  margin-left: 10px;
  flex: 1;
  /*background-color: #e9eef3;*/
}

.Info-left-top {
  height: 300px;
}

.img-card {
  margin-top: 20px;
  padding: 2px;
  border-radius: 2px;
  background-color: rgba(140, 197, 255, 0.4);
}

.image {
  width: 100%;
  height: 100%;
  display: block;
  /* max-height: 230px; */
  /* min-height: 180px; */
}

.left-star {
  text-align: center;
  margin-top: 20px;
}
#user-img {
  margin: auto;
  padding-top: 16px;
  width: 320px;
  height: 320px;
}

.Info-left-bottom {
  height: 300px;
}

.Info-right {
  min-width: 700px;
  margin-left: 20px;
  flex: 3;
}

.Info-right-top {
  min-width: 700px;
  background-color: #fff;
  padding: 20px;
  min-height: 300px;
  max-height: 400px;
}

.Info-right-header {
  height: 10px;
}

.changeInfo {
  color: #3a8ee6;
  /*font-weight: bold;*/
  /*color: #7F7F7F;*/
  cursor: pointer;
  float: right;
}

.changeInfo:hover {
  font-weight: bold;
  color: #0d81ec;
}

.info-form {
  display: flex;
  /*max-width: 800px;*/
  min-height: 230px;
  color: #7f7f7f;
  margin-top: 20px;
  margin-left: 50px;
  font-size: 14px;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
}

.el-form-item__content {
  height: auto;
  max-height: 120px;
  overflow: hidden;
}

.el-form-item__label {
  font-weight: bolder;
}

.Info-right-bottom {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  min-height: 300px;
}

.el-textarea__inner {
  height: 100px;
}
</style>
